<template>
  <div>
    <div style="display: flex;align-items: center;justify-content: center;margin-top: 30px">
      <el-card style="width: 80%">
        <div style="margin-left: 20px">
          <div style="display: flex;align-items: center;border-bottom: 1px solid #e5e5e5;padding-bottom: 10px">
            <div style="font-size: 25px;font-weight: bold;">订单金额</div>
            <div style="margin-left: 10px;color: #409EFF;font-size: 24px;font-weight: bold">￥{{ PayData.price }}</div>
          </div>
          <div style="border-bottom: 1px solid #e5e5e5;padding-bottom: 10px;margin-top: 20px">
            <div style="font-size: 25px;font-weight: bold;">{{ PayData.hotel_name }}</div>
            <div style="display: flex;margin-top: 10px;width: 80%">
              <div style="flex: 1">房间数:{{ PayData.room_num }}</div>
              <div style="flex: 1">入住日期:{{ PayData.checkin_date }}</div>
              <div style="flex: 1">退房日期:{{ PayData.checkout_date }}</div>
              <div style="flex: 1">入住{{ PayData.stay_days }}晚</div>
            </div>
          </div>
        </div>
        <div style="display: flex;align-items: center;justify-content: center;margin-top: 50px">
          <el-button type="warning" style="width: 100px;height: 50px;font-size: 20px"
                     @click="dialogPay = true">支付
          </el-button>
        </div>
      </el-card>
    </div>

    <el-dialog title="提示" :visible.sync="dialogPay" width="30%">
      <el-form label-width="80px" style="padding-right: 20px">
        <el-form-item prop="pay">
          <div style="display: flex">
            <div style="font-weight: bold">订单金额</div>
            <div style="margin-left: 20px;color: #409EFF;font-size: 24px;font-weight: bold">￥{{ PayData.price }}</div>
          </div>
        </el-form-item>
        <div style="text-align: center; margin-bottom: 20px">
          <el-button type="primary" @click="PayC()">确认</el-button>
          <el-button @click="dialogPay = false">取 消</el-button>
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "offlinePayment",
  data() {
    return {
      dialogPay: false,
      coupon: '',
      pay_id: "",
      PayData: {},
      user: JSON.parse(localStorage.getItem('user')),
      coupon_id: 0,
      hotel: [],
      hotelData: {},
    }
  },
  methods: {
    load() {
      this.$request.post('/orders_list/', {
        "pay_id": this.pay_id
      }).then(res => {
        if (res.code === '200') {
          this.PayData = res.data
          console.log("订单数据200", res.data)
        } else if (res.code === '501') {
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    PayC() {
      this.$request.post('/user_pay/', {
        "user_id": this.user.id,
        "pay_id": this.pay_id,
        "coupon_id ": this.coupon_id
      }).then(res => {
        if (res.code === '200') {
          this.$message.success('支付成功')
          this.dialogPay = false
          //跳转到首页
          this.$router.push('/business/businessHome')
        } else {
          this.$message.error(res.msg)
        }
      })
    }
  },
  created() {
    this.pay_id = this.$route.query.pay_id || ''
    this.load()
  }
}
</script>
<style scoped>

</style>